<template>
  <div class="planning-page">
    <home-header />
    <div class="planning-content">
      <div class="container">
        <div class="planning-layout">
          <!-- 左侧日历 -->
          <div class="calendar-section">
            <div class="calendar">
              <span id="prevMonth" @click="prevMonth">
                <i class="el-icon-arrow-left"></i>
              </span>
              <span id="currentMonthYear" style="vertical-align: middle;">{{ currentYearMonth }}</span>
              <span id="nextMonth" @click="nextMonth">
                <i class="el-icon-arrow-right"></i>
              </span>
              <table>
                <thead>
                  <tr>
                    <th>日</th>
                    <th>一</th>
                    <th>二</th>
                    <th>三</th>
                    <th>四</th>
                    <th>五</th>
                    <th>六</th>
                  </tr>
                </thead>
                <tbody id="calendarBody">
                  <tr v-for="(week, weekIndex) in calendarWeeks" :key="weekIndex">
                    <td v-for="(day, dayIndex) in week" 
                        :key="dayIndex"
                        :class="{ 
                          'today': day === selectedDate,
                          'has-tasks': hasTasks(day)
                        }"
                        @click="selectDate(day)">
                      <span class="day-number">{{ day }}</span>
                      <span v-if="hasTasks(day)" class="task-dot"></span>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>

          <!-- 右侧任务列表 -->
          <div class="plan-section">
            <div class="plan">
              <h3>任务 <span style="float: right;">
                <el-dropdown @command="handleCommand">
                  <span class="el-dropdown-link">
                    批量操作<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="selectAll">全选</el-dropdown-item>
                    <el-dropdown-item command="invertSelect">反选</el-dropdown-item>
                    <el-dropdown-item command="batchDelete" :disabled="!hasSelected">批量删除</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                <span>{{ completedPlans }}</span>/<span>{{ totalPlans }}</span>
              </span></h3>
              <div id="progress-bar">
                <div id="progress-bar-inner" :style="{ width: progressWidth + '%' }"></div>
              </div>
              <button class="add-plan" @click="showPopup"><span class="icon iconfont icon-add" style="font-size: 30px;"></span></button>
              <div class="plan-list" id="planList" v-show="totalPlans > 0">
                <div v-for="(plan, index) in currentPlans" 
                     :key="index" 
                     class="plan-item"
                     :class="{ 
                       'completed-plan': plan.completed,
                       'selected-plan': selectedPlans.includes(index)
                     }"
                     @click="toggleSelect(index)">
                  <el-switch
                    v-model="plan.completed"
                    @change="togglePlanComplete(index)"
                    @click.native.stop
                    active-color="#409EFF"
                    inactive-color="#909399"
                    class="plan-switch"
                  ></el-switch>
                  <div>
                    <h3 class="title">{{ plan.title }}</h3>
                    <p class="description">{{ plan.description.length > 35 ? plan.description.substring(0, 35) + '...' : plan.description }}</p>
                  </div>
                  <p class="dateTime">{{ formatDateTime(plan.dateTime) }}</p>
                  <button class="editPlan" @click.stop="editPlan(index)">编辑</button>
                  <button class="deletePlan" @click.stop="deletePlan(index)">删除</button>
                </div>
              </div>
              <el-empty v-show="totalPlans === 0" description="暂无数据"></el-empty>
            </div>
          </div>
        </div>
      </div>

      <!--计划弹窗-->
      <el-dialog
        :title="isEditing ? '编辑计划' : '计划'"
        :visible.sync="showPopupFlag"
        width="420px"
        :before-close="hidePopup"
        class="custom-dialog"
      >
        <el-form :model="newPlan" ref="planForm" label-width="0" class="custom-form">
          <el-form-item>
            <el-input v-model="newPlan.title" placeholder="标题" class="custom-input" />
          </el-form-item>
          <el-form-item>
            <el-input
              type="textarea"
              v-model="newPlan.description"
              placeholder="描述"
              :rows="4"
              class="custom-input"
            />
          </el-form-item>
          <el-form-item>
            <el-date-picker
              v-model="newPlan.reminderTime"
              type="datetime"
              placeholder="选择提醒时间"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              :picker-options="pickerOptions"
              class="custom-input datetime-picker"
            />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="hidePopup" class="custom-btn">取消</el-button>
          <el-button type="primary" @click="savePlan" class="custom-btn primary-btn">保存</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import HomeHeader from '@/components/HomeHeader.vue'
import reminderService from '@/utils/reminder'

export default {
  name: 'PlanningView',
  components: {
    HomeHeader
  },
  data() {
    return {
      currentDate: new Date(),
      currentYear: new Date().getFullYear(),
      currentMonth: new Date().getMonth(),
      selectedDate: new Date().getDate(),
      showPopupFlag: false,
      isEditing: false,
      editingIndex: -1,
      selectedPlans: [],
      newPlan: {
        title: '',
        description: '',
        completed: false,
        reminderTime: ''
      },
      currentPlans: [],
      calendarWeeks: [],
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            const date = new Date()
            picker.$emit('pick', date)
          }
        }, {
          text: '明天',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() + 3600 * 1000 * 24)
            picker.$emit('pick', date)
          }
        }, {
          text: '一周后',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() + 3600 * 1000 * 24 * 7)
            picker.$emit('pick', date)
          }
        }],
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7 // 禁用今天之前的日期
        },
        disabledHours() {
          const hours = []
          const now = new Date()
          const selectedDate = new Date(this.newPlan.reminderTime)
          if (selectedDate && selectedDate.toDateString() === now.toDateString()) {
            for (let i = 0; i < now.getHours(); i++) {
              hours.push(i)
            }
          }
          return hours
        },
        disabledMinutes(hour) {
          const minutes = []
          const now = new Date()
          const selectedDate = new Date(this.newPlan.reminderTime)
          if (selectedDate && 
              selectedDate.toDateString() === now.toDateString() && 
              hour === now.getHours()) {
            for (let i = 0; i < now.getMinutes(); i++) {
              minutes.push(i)
            }
          }
          return minutes
        },
        disabledSeconds(hour, minute) {
          const seconds = []
          const now = new Date()
          const selectedDate = new Date(this.newPlan.reminderTime)
          if (selectedDate && 
              selectedDate.toDateString() === now.toDateString() && 
              hour === now.getHours() && 
              minute === now.getMinutes()) {
            for (let i = 0; i < now.getSeconds(); i++) {
              seconds.push(i)
            }
          }
          return seconds
        }
      }
    }
  },
  computed: {
    currentYearMonth() {
      return `${this.currentYear}-${this.padZero(this.currentMonth + 1)}`
    },
    totalPlans() {
      return this.currentPlans.length
    },
    completedPlans() {
      return this.currentPlans.filter(plan => plan.completed).length
    },
    progressWidth() {
      return this.totalPlans === 0 ? 0 : (this.completedPlans / this.totalPlans) * 100
    },
    hasSelected() {
      return this.selectedPlans.length > 0
    }
  },
  methods: {
    padZero(num) {
      return (num < 10 ? '0' : '') + num
    },
    updateCalendar() {
      const firstDay = new Date(this.currentYear, this.currentMonth, 1).getDay()
      const daysInMonth = new Date(this.currentYear, this.currentMonth + 1, 0).getDate()
      const weeks = []
      let date = 1
      
      for (let i = 0; i < 6; i++) {
        const week = []
        for (let j = 0; j < 7; j++) {
          if (i === 0 && j < firstDay) {
            week.push('')
          } else if (date > daysInMonth) {
            week.push('')
          } else {
            week.push(date)
            date++
          }
        }
        weeks.push(week)
      }
      this.calendarWeeks = weeks
    },
    isToday(day) {
      if (!day) return false
      return day === this.selectedDate
    },
    selectDate(day) {
      if (!day) return
      this.selectedDate = day
      this.displayPlans(new Date(this.currentYear, this.currentMonth, day))
    },
    prevMonth() {
      this.currentMonth--
      if (this.currentMonth < 0) {
        this.currentMonth = 11
        this.currentYear--
      }
      this.updateCalendar()
      this.selectedDate = 1
      this.displayPlans(new Date(this.currentYear, this.currentMonth, 1))
    },
    nextMonth() {
      this.currentMonth++
      if (this.currentMonth > 11) {
        this.currentMonth = 0
        this.currentYear++
      }
      this.updateCalendar()
      this.selectedDate = 1
      this.displayPlans(new Date(this.currentYear, this.currentMonth, 1))
    },
    formatDateTime(dateTimeString) {
      const date = new Date(dateTimeString)
      const options = { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' }
      return date.toLocaleString('zh-CN', options)
    },
    displayPlans(date) {
      const year = date.getFullYear()
      const month = this.padZero(date.getMonth() + 1)
      const day = this.padZero(date.getDate())
      const planKey = `${year}-${month}-${day}`
      this.currentPlans = JSON.parse(localStorage.getItem(planKey)) || []
    },
    showPopup() {
      const now = new Date()
      this.newPlan.reminderTime = `${now.getFullYear()}-${this.padZero(now.getMonth() + 1)}-${this.padZero(now.getDate())} ${this.padZero(now.getHours())}:${this.padZero(now.getMinutes())}:${this.padZero(now.getSeconds())}`
      this.showPopupFlag = true
    },
    hidePopup() {
      this.showPopupFlag = false
      this.isEditing = false
      this.editingIndex = -1
      this.newPlan = { title: '', description: '', completed: false, reminderTime: '' }
    },
    editPlan(index) {
      this.isEditing = true
      this.editingIndex = index
      const plan = this.currentPlans[index]
      this.newPlan = {
        title: plan.title,
        description: plan.description,
        completed: plan.completed,
        reminderTime: plan.reminderTime || ''
      }
      this.showPopup()
    },
    savePlan() {
      if (!this.newPlan.title) {
        this.$message.error('请输入计划标题！')
        return
      }
      if (!this.newPlan.description) {
        this.$message.error('请输入计划描述！')
        return
      }

      const year = this.currentYear
      const month = this.padZero(this.currentMonth + 1)
      const day = this.padZero(this.selectedDate)
      const planKey = `${year}-${month}-${day}`
      
      const plans = JSON.parse(localStorage.getItem(planKey)) || []
      
      if (this.isEditing) {
        // 编辑现有计划
        const now = new Date()
        const planDateTime = `${now.getFullYear()}-${this.padZero(now.getMonth() + 1)}-${this.padZero(now.getDate())} ${this.padZero(now.getHours())}:${this.padZero(now.getMinutes())}:${this.padZero(now.getSeconds())}`
        plans[this.editingIndex] = {
          ...plans[this.editingIndex],
          title: this.newPlan.title,
          description: this.newPlan.description,
          dateTime: planDateTime,
          reminderTime: this.newPlan.reminderTime
        }

        // 更新提醒
        if (this.newPlan.reminderTime) {
          reminderService.addReminder(
            `plan-${this.editingIndex}`,
            this.newPlan.reminderTime,
            this.newPlan.title,
            this.newPlan.description
          )
        }
      } else {
        // 添加新计划
        const now = new Date()
        const planDateTime = `${now.getFullYear()}-${this.padZero(now.getMonth() + 1)}-${this.padZero(now.getDate())} ${this.padZero(now.getHours())}:${this.padZero(now.getMinutes())}:${this.padZero(now.getSeconds())}`
        
        const newPlanData = {
          ...this.newPlan,
          dateTime: planDateTime
        }
        
        plans.push(newPlanData)

        // 添加提醒
        if (this.newPlan.reminderTime) {
          reminderService.addReminder(
            `plan-${plans.length - 1}`,
            this.newPlan.reminderTime,
            this.newPlan.title,
            this.newPlan.description
          )
        }
      }
      
      localStorage.setItem(planKey, JSON.stringify(plans))
      this.displayPlans(new Date(this.currentYear, this.currentMonth, this.selectedDate))
      this.hidePopup()
      this.$message.success(this.isEditing ? '修改成功' : '保存成功')
    },
    togglePlanComplete(index) {
      const planKey = `${this.currentYearMonth}-${this.padZero(this.selectedDate)}`
      const plans = JSON.parse(localStorage.getItem(planKey)) || []
      
      plans[index].completed = !plans[index].completed
      localStorage.setItem(planKey, JSON.stringify(plans))
      this.displayPlans(new Date(this.currentYear, this.currentMonth, this.selectedDate))
    },
    deletePlan(index) {
      this.$confirm('确定要执行此操作吗？', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const planKey = `${this.currentYearMonth}-${this.padZero(this.selectedDate)}`
        const plans = JSON.parse(localStorage.getItem(planKey)) || []
        
        plans.splice(index, 1)
        localStorage.setItem(planKey, JSON.stringify(plans))
        this.displayPlans(new Date(this.currentYear, this.currentMonth, this.selectedDate))
      }).catch(() => {})
    },
    toggleSelect(index) {
      const position = this.selectedPlans.indexOf(index)
      if (position === -1) {
        this.selectedPlans.push(index)
      } else {
        this.selectedPlans.splice(position, 1)
      }
    },
    handleCommand(command) {
      switch (command) {
        case 'selectAll':
          this.selectedPlans = this.currentPlans.map((_, index) => index)
          break
        case 'invertSelect':
          this.selectedPlans = this.currentPlans
            .map((_, index) => index)
            .filter(index => !this.selectedPlans.includes(index))
          break
        case 'batchDelete':
          this.batchDeletePlans()
          break
      }
    },
    batchDeletePlans() {
      if (this.selectedPlans.length === 0) return
      
      this.$confirm(`确定要删除选中的 ${this.selectedPlans.length} 个任务吗？`, '批量删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const planKey = `${this.currentYearMonth}-${this.padZero(this.selectedDate)}`
        const plans = JSON.parse(localStorage.getItem(planKey)) || []
        
        // 从后往前删除，避免索引变化
        this.selectedPlans.sort((a, b) => b - a).forEach(index => {
          plans.splice(index, 1)
        })
        
        localStorage.setItem(planKey, JSON.stringify(plans))
        this.displayPlans(new Date(this.currentYear, this.currentMonth, this.selectedDate))
        this.selectedPlans = []
        this.$message.success('删除成功')
      }).catch(() => {})
    },
    hasTasks(day) {
      if (!day) return false
      const date = new Date(this.currentYear, this.currentMonth, day)
      const year = date.getFullYear()
      const month = this.padZero(date.getMonth() + 1)
      const dayStr = this.padZero(date.getDate())
      const planKey = `${year}-${month}-${dayStr}`
      const plans = JSON.parse(localStorage.getItem(planKey)) || []
      return plans.length > 0
    }
  },
  mounted() {
    this.updateCalendar()
    this.displayPlans(this.currentDate)
  }
}
</script>

<style scoped>
.planning-page {
  min-height: 100vh;
  background-color: #f5f7fa;
}

.planning-content {
  padding: 80px 40px 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.container {
  box-sizing: border-box;
  width: 100%;
  margin: 0px auto;
  background-color: #fff;
  padding: 30px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.planning-layout {
  display: flex;
  gap: 50px;
  min-height: 600px;
}

.calendar-section {
  flex: 0 0 420px;
  border-right: 1px solid #eef2f6;
  padding-right: 50px;
}

.plan-section {
  flex: 1;
  min-width: 0;
}

.plan > h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 20px;
  color: #2c3e50;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.calendar {
  text-align: center;
}

.calendar th {
  padding: 12px 0;
  font-size: 14px;
  color: #606266;
  font-weight: 500;
}

.calendar td {
  padding: 12px 0;
  font-size: 14px;
  color: #606266;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 8px;
  position: relative;
  height: 40px;
  vertical-align: top;
}

.calendar td:empty {
  cursor: default;
}

.calendar td .day-number {
  display: inline-block;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.calendar td:hover .day-number:not(:empty) {
  background-color: #ecf5ff !important;
  color: #409eff;
}

.calendar .today .day-number {
  background-color: #409eff !important;
  color: #fff !important;
}

.calendar .has-tasks .day-number {
  font-weight: 500;
  color: #409eff;
}

.calendar .has-tasks.today .day-number {
  color: #fff !important;
}

.calendar .has-tasks:hover:not(.today) .day-number {
  background-color: #ecf5ff;
  color: #409eff;
}

.task-dot {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  background-color: #409eff;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.calendar .today .task-dot {
  background-color: #fff;
}

.calendar td:hover .task-dot:not(:empty) {
  background-color: #409eff;
}

.plan-list {
  margin-top: 20px;
  max-height: calc(100vh - 300px);
  overflow-y: auto;
  padding-right: 10px;
  padding-top: 2px;
}

.plan-list::-webkit-scrollbar {
  width: 6px;
}

.plan-list::-webkit-scrollbar-thumb {
  background-color: #dcdfe6;
  border-radius: 3px;
}

.plan-list::-webkit-scrollbar-track {
  background-color: #f5f7fa;
}

.editPlan {
  background-color: #409eff;
  color: #fff;
  border: none;
  padding: 6px 12px;
  cursor: pointer;
  margin-left: 10px;
  position: absolute;
  right: 62px;
  bottom: 10px;
  border-radius: 4px;
  font-size: 12px;
  transition: all 0.3s ease;
}

.editPlan:hover {
  background-color: #66b1ff;
}

.deletePlan {
  background-color: #f56c6c;
  color: #fff;
  border: none;
  padding: 6px 12px;
  cursor: pointer;
  margin-left: 10px;
  position: absolute;
  right: 10px;
  bottom: 10px;
  border-radius: 4px;
  font-size: 12px;
  transition: all 0.3s ease;
}

.deletePlan:hover {
  background-color: #f78989;
}

.plan-item {
  margin-bottom: 15px;
  padding: 16px;
  background-color: #f8fafc;
  position: relative;
  display: flex;
  min-height: 70px;
  border-radius: 8px;
  transition: all 0.3s ease;
  border: 1px solid #ebeef5;
  transform: translateY(0);
  cursor: pointer;
}

.plan-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  border-color: #409eff;
}

.selected-plan {
  background-color: #ecf5ff;
  border-color: #409eff;
}

.plan-item h3 {
  color: #2c3e50;
  font-size: 15px;
  margin: 0 0 8px;
  font-weight: 500;
  text-align: left;
}

.plan-item input[type='checkbox'] {
  width: 16px;
  height: 16px;
  margin-top: 20px;
  margin-right: 12px;
  cursor: pointer;
}

.dateTime {
  font-size: 12px;
  position: absolute;
  right: 16px;
  top: 16px;
  color: #909399;
}

.plan-item .description {
  color: #606266;
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.completed {
  text-decoration: line-through;
  color: #909399;
}

#progress-bar {
  width: 100%;
  height: 8px;
  background-color: #ebeef5;
  position: relative;
  border-radius: 4px;
  margin-bottom: 25px;
  overflow: hidden;
}

#progress-bar-inner {
  width: 0%;
  height: 100%;
  background: linear-gradient(to right, #409eff, #67c23a);
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.calendar table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 4px;
}

.completed-plan {
  opacity: 0.7;
  text-decoration: line-through;
}

#prevMonth,
#nextMonth {
  display: inline-block;
  cursor: pointer;
  color: #606266;
  transition: all 0.3s ease;
  padding: 4px;
  font-size: 20px;
  vertical-align: middle;
}

#prevMonth:hover,
#nextMonth:hover {
  color: #409eff;
}

#currentMonthYear {
  color: #2c3e50;
  font-size: 16px;
  font-weight: 500;
  margin: 0 15px;
  vertical-align: middle;
}

.data-no {
  padding-top: 40px;
  text-align: center;
  height: 200px;
  font-size: 14px;
  color: #909399;
}
.data-no img {
 margin: 0 auto; 
}

.add-plan {
  position: absolute;
  width: 56px !important;
  height: 56px;
  right: 30px;
  bottom: 30px;
  border-radius: 50% !important;
  background-color: #409eff;
  color: #fff;
  padding: 0;
  outline: none;
  border: none;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
  transition: all 0.3s ease;
}

.add-plan:hover {
  background-color: #66b1ff;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(64, 158, 255, 0.4);
}

/* Element UI Dialog Customization */
.custom-dialog >>> .el-dialog {
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
  background: #fff;
  padding-bottom: 0;
  font-size: 14px;
  overflow: hidden;
}

.custom-dialog >>> .el-dialog__header {
  padding: 24px 24px 0;
  border-bottom: 1px solid #eef2f6;
}

.custom-dialog >>> .el-dialog__title {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
  letter-spacing: 0.5px;
}

.custom-form {
  margin-bottom: 0;
  font-size: 14px;
}

.custom-input {
  display: flex;
  justify-content: center;
}

.custom-input >>> .el-input__inner {
  width: 100%;
  margin: 0 auto;
  border-radius: 8px;
  height: 40px;
  font-size: 14px;
  padding-left: 12px;
  border-color: #dcdfe6;
  transition: all 0.3s ease;
}

.custom-input >>> .el-input__inner:focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}

.custom-input >>> .el-textarea__inner {
  width: 100%;
  margin: 0 auto;
  border-radius: 8px;
  font-size: 14px;
  padding: 12px;
  resize: none;
  border-color: #dcdfe6;
  transition: all 0.3s ease;
}

.custom-input >>> .el-textarea__inner:focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}

.dialog-footer {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 0;
  padding: 16px 24px;
  border-top: 1px solid #eef2f6;
}

.custom-btn {
  border-radius: 8px;
  min-width: 100px;
  height: 40px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.primary-btn {
  width: 100px;
  background: #409eff;
  border-color: #409eff;
  color: #fff;
  font-weight: 500;
}

.primary-btn:hover {
  background: #66b1ff;
  border-color: #66b1ff;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
}

:deep(.el-dialog__body) {
  padding: 24px;
}

.plan-switch {
  margin-top: 20px;
  margin-right: 12px;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
  margin-right: 15px;
}

.el-dropdown-link:hover {
  color: #66b1ff;
}

@media (max-width: 768px) {
  .planning-content {
    padding: 80px 20px 20px;
  }
  
  .planning-layout {
    flex-direction: column;
    gap: 30px;
  }
  
  .calendar-section {
    flex: none;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #eef2f6;
    padding-right: 0;
    padding-bottom: 30px;
  }
  
  .plan-section {
    width: 100%;
  }

  .container {
    padding: 20px;
  }

  .add-plan {
    right: 20px;
    bottom: 20px;
  }
}

.datetime-picker {
  width: 100% !important;
}

.datetime-picker >>> .el-input__prefix {
  left: 8px !important;
}

.datetime-picker >>> .el-input__inner {
  padding-left: 32px !important;
}
</style> 